<template>
  <div id="meetingManage">
    <!-- <van-nav-bar title="会议管理" left-arrow fixed :border="false" @click-left="$common.backButtonClicked(false)"></van-nav-bar> -->
    <div class="nav-container">
      <p class="date-class" @click="showDate">{{$common.convertDate(dateValue/1000,'Y-M-D')}}
        <van-icon name="arrow-down" color="#999999"/>
      </p>
      <p class="time-class" @click="showTime">{{ start }} - {{ end }}
        <van-icon name="arrow-down" color="#999999"/>
      </p>
      <div class="content">
        <van-pull-refresh v-model="isLoading" @refresh="getMeetingRoom(false)">
          <img
            slot="loading"
            class="loading-gif-refresh"
            src="../../assets/loading.gif"
          >
          <template v-if="roomList.length == 0">
            <div class="no-data-img">
              <img src="../../assets/meeting/no-data.png">
              <p>暂无相关数据~</p>
            </div>
          </template>

          <template v-else>
            <div class="panel" v-for="(item,index) in roomList" :key="index" 
             @click="toDetail(item.oid, item.type)">
              <div class="panel-mask"></div>
              <div class="panel-content">
                <div class="circle-img">
                  <span :class="item.type == 2?'circle-font':'circle-font-unuse'">{{item.type == 2?'可用':'不可用'}}</span>
                  <template v-if="item.type == 2">
                    <img class="circle" src="../../assets/meeting/circle.png">
                  </template>
                  <template v-else>
                    <img class="circle" src="../../assets/meeting/circleRed.png">
                  </template>
                </div>
                <p class="meet-title van-ellipsis">{{item.oname}}</p>
                <p class="meet-facility"><img class="little" src="../../assets/meeting/people.png">{{item.number}}人</p>
                <div class="meet-facility van-ellipsis"><img class="little" src="../../assets/meeting/tv.png" />
                  <span class="margin-l-10" v-for="(fac, j) in item.facilities" :key="j" v-if="j < 5">{{fac}}
                  </span>
                  <span v-if="item.facilities.length >= 6">......</span>
                </div>
              </div>
            </div>
          </template>
          
        </van-pull-refresh>
      </div>
    </div>
    <!-- 日期弹出层 -->
    <van-popup v-model="dateShow" position="bottom" :close-on-click-overlay="false" 
    :close-on-popstate="true">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        @confirm="dateConfirm"
        @cancel="dateCancel"
      />
    </van-popup>
    <!-- 时间选择组件 -->
    <time-choose
      :start="start"
      :end="end"
       height="300px"
      :show.sync="datePickerVisible"
      @change="timeChange">
    </time-choose>
  </div>
</template>
<script type="text/javascript">
  import timeChoose from '@/components/TimeChoose.vue'
  export default{
    components: {
      'time-choose': timeChoose
    },
    data(){
      return{
        dateShow: false,
        currentDate: new Date(),
        minDate: new Date(),
        dateValue: '',
        
        start: '',
        end: '',
        datePickerVisible: false,

        roomList:[],

        isLoading:false
      }
    },
    activated() {
      this.$bridge.callHandler('navTitle', {title: '会议室'})

      this.dateValue = new Date().valueOf()
      this.start = this.$common.convertDate((new Date().valueOf())/1000, 'h:m') + ''
      this.end = `${new Date().getHours()+1}:${new Date().getMinutes() < 10 ? '0'+new Date().getMinutes() : new Date().getMinutes()}`
      this.getMeetingRoom(true)
    },
    watch: {
      // 日期选择器
      'dateShow': {
        handler(newV, oldV) {
          if (this.dateShow) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('cancelNavKeepView')
          }
        }
      },
      // 时间选择器
      'datePickerVisible': {
        handler(newV, oldV) {
          if (this.datePickerVisible) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('cancelNavKeepView')
          }
        }
      }
    },
    methods:{
      /**
       * 返回键
       * @return {[type]} [description]
       */
      onClickLeft() {
        this.$router.go(-1)
      },
      /**
       * 日期选择器
       */
      showDate() {
        this.dateShow = true
      },
      dateConfirm(e) {
        this.currentDate = e
        this.dateValue = e
        this.dateShow = false
        this.getMeetingRoom(true)
      },
      dateCancel() {
        this.currentDate = this.dateValue
        this.dateShow = false
      },
      /**
       * 时间选择器
       * @return {[type]} [description]
       */
      showTime(){
        this.datePickerVisible = true
      },
      timeChange(e) {
        this.start = e.start
        this.end = e.end
        this.getMeetingRoom(true)
      },
      /**
       * 会议室列表
       * @return {[type]} [description]
       */
      getMeetingRoom(showToast) {
        this.isLoading = true
        let a_time = this.$common.formatTime(this.dateValue,'Y-M-D') + ' ' + this.start
        let o_time = this.$common.formatTime(this.dateValue,'Y-M-D') + ' ' + this.end
        let config = {
          method: "post",
          url: `${this.$common.basePath}meeting.php`,
          data: {
            do: "meetinglist",
            a_time: a_time,
            o_time: o_time,
            user_id: this.$store.state.userId,
          }
        }
        if (showToast) {
          this.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
        }
        this.$axios(config).then(res => {
          let arr = this.$common.deepCopy(res.data)
          for (let i = 0; i < arr.length; i++) {
            arr[i].facilities = arr[i].facilities.split(",")
          }
          this.roomList = this.$common.deepCopy(arr)
          this.isLoading = false
          this.$toast.clear()
        }).catch(err => {
          this.$toast.clear()
          this.$toast(err.msg)
        })
      },
      /**
       * 会议详情
       * id:会议室id
       * @return {[type]} [description]
       */
      toDetail(id, type) {
        let useable = type == 2?true:false
        this.$router.push({name:"meetDetail", query:{id:id, useable:useable, date:this.dateValue, start:this.start, end:this.end, type:'add'}})
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .date-class{
    margin: 10px 15px;
    display: inline-block;
  }
  .time-class{
    margin: 10px 15px;
    display: inline-block;
  }
  .content{
    margin: 15px;

    .van-pull-refresh__track {
      min-height: calc(100vh - 100px);
    }
  }
  .panel{
    background-image: url('../../assets/meeting/conference.png');
    background-repeat:repeat-x;
    background-size: cover;
    width: calc(100vw - 30px);
    height: 200px;
    color: #fff;
    margin-bottom: 10px;
  }
  .panel-mask{
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%);
    border-radius: 8px;
  }
  .panel-content{
    height: 100%;
    position: relative;
    top: -200px;
    border-radius: 8px;
  }
  .circle-img{
    text-align: right;
  }
  .circle{
    width: 64px;
    height: 37px;
    z-index: -1;
  }
  .circle-font{
    position: absolute;
    top: 4%;
    right: 3%;
  }
  .circle-font-unuse{
    position: absolute;
    top: 2%;
    right: 1%;
  }
  .meet-title{
    padding-left: 10px;
    padding-top: 54px;
    font-size: 17px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
    min-height: 24px;
  }
  .meet-people{
    padding-left: 10px;
    margin: 0 0 5px 0;
    font-size: 14px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .meet-facility{
    padding-left: 10px;
    font-size: 14px;
    margin: 0 0 5px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .little{
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: #fff;
  }
  .margin-l-10{
    margin-right: 10px;
  }


  .new-mask {
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.4));
    border-radius: 8px;
    height: 200px;
  }
  .new-img{
    width: calc(100vw - 30px);
    opacity: 0.5; 
  }
  .no-data-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40% 0 ;
    background-color: #fff;

    img {
      width: 180px;
      height: 106px;
      text-align: center;
    }

    p{
      font-size: 17px;
      color: #333333
    }
  }
</style>
<style type="text/css" lang="less">
  #meetingManage {
    .van-pull-refresh__track {
      min-height: calc(100vh - 105px);
    }
  }
</style>